<template>
    <div>
        <br><h3 align="left">数据筛选</h3>
        <el-form :inline="true" :model="Form" class="demo-form-inline" align="left" style="margin-top: 1%;">
            <el-form-item label="产品编号">
                <el-input v-model="Form.CategoryCode" placeholder="产品编号"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="Form.CategoryName" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetCategoryList()">查询</el-button>
                <el-button type="success" @click="add()">添加</el-button>
                <el-button type="danger" @click="onBatchDel()">批量删除</el-button>
                <el-button type="info" @click="derive(CategoryList)">导出</el-button>
            </el-form-item>
        </el-form>
        <h3 align="left">数据列表</h3>
        <el-table :data="Category" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="categoryCode" label="类别编号">
            </el-table-column>
            <el-table-column prop="categoryName" label="类别名称">
            </el-table-column>
            <el-table-column prop="superiorTId" label="上级类别">
                <template slot-scope="it">
                    <span>{{ GetParentEquile(it.row) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime.substr(0,19).replace('T',' ') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="warning" @click="upd(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="onDel(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageIndex"
            :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount" align="center" :prev-text="`上一页`" :next-text="`下一页`">
        </el-pagination>
    </div>
</template>
<script>
import XLSX from 'xlsx';
import { CategoryListApi, DeleteCategoryApi, DeleteCategoryListApi } from "@/api/BasicsDatumServer/Category";
export default {
    data() {
        return {
            // 分类列表
            Category: [],
            // 表单数据
            Form: {
                // 分类编码
                CategoryCode: "",
                // 分类名称
                CategoryName: "",
            },
            // 分页信息
            page: {
                // 当前页码
                pageIndex: 1,
                // 每页显示数量
                pageSize: 5,
                // 总页数
                pageCount: 0,
                // 总记录数
                totalCount: 0,
            },
            // 多选
            CategoryList: []
        }
    },
    //计算属性
    computed: {
        sid() {
            //声明一个空数组
            var sid = [];
            //遍历CategoryList数组
            this.CategoryList.forEach((item) => {
                //将item.id添加到sid数组中
                sid.push(item.id);
            })
            //返回sid数组
            return sid;
        },
    },
    methods: {
        //获取类别列表
        GetCategoryList() {
            let params = {
                code: this.Form.CategoryCode,
                name: this.Form.CategoryName,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
            };
            CategoryListApi(params).then(res => {
                this.Category = res.data.data;
                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
            });
        },
        //添加类别
        add() {
            //跳转到添加类别页面
            this.$router.push("CategoryAdd");
        },
        //跳转到类别编辑页面
        upd(id) {
            this.$router.push("CategoryEdit?id=" + id);
        },
        //分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.GetCategoryList();
        },
        //分页
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.GetCategoryList();
        },
        //获取父类名
        GetParentEquile(it) {
            //console.log(it);
            if (it.superiorTId != 0) {
                var item = this.Category.find(x => x.id == it.superiorTId);
                if (item != null) {
                    return item.categoryName;
                }
            }
            else {
                return "-";
            }
            return it.categoryName;
        },
        //选择改变
        handleSelectionChange(val) {
            this.CategoryList = val;
        },
        //删除
        onDel(id) {
            // 弹出确认框，询问是否删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除分类
                let params = {
                    id: id
                };
                DeleteCategoryApi(params).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success("删除成功");
                        this.GetCategoryList();
                    } else {
                        this.$message.error("删除失败");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //批量删除
        onBatchDel() {
            if (this.CategoryList.length == 0) {
                this.$message.error("请选择要删除的数据");
                return;
            }
            // 弹出确认框，询问是否删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除分类
                let params = {
                    DelId: this.sid.toString(),
                };
                console.log(params);
                DeleteCategoryListApi(params).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success("删除成功");
                        this.GetCategoryList();
                    } else {
                        this.$message.error("删除失败");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //导出
        derive(CategoryList) {
            const filteredData = CategoryList.map(row => {
                return {
                    '类别编号': row.categoryCode,
                    '类别名称': row.categoryName,
                    '上级类别': row.superiorTId,
                    '创建时间': row.createTime,
                    '备注': row.remarks
                }
            });
            const worksheet = XLSX.utils.json_to_sheet(filteredData);
          
            worksheet['!cols'] = [{ wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }];
           
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

            XLSX.writeFile(workbook, '类别列表.xlsx');
        },
    },
    mounted() {
        //调用获取分类列表的方法
        this.GetCategoryList();
    },
}
</script>
<style></style>